<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SessionBox 会话管理器</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <!-- Header -->
    <div class="header">
      <div class="logo">
        <img src="../assets/icons/icon32.png" alt="SessionBox" class="logo-icon">
        <h1>SessionBox</h1>
      </div>
      <button class="settings-btn" id="settingsBtn" title="设置">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97L2.46 14.6c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.31.61.22l2.49-1c.52.39 1.06.73 1.69.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.25 1.17-.59 1.69-.98l2.49 1c.22.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"/>
        </svg>
      </button>
    </div>

    <!-- Current Session -->
    <div class="current-session" id="currentSession">
      <div class="session-info">
        <div class="session-color" id="currentSessionColor"></div>
        <div class="session-details">
          <div class="session-name" id="currentSessionName">加载中...</div>
          <div class="session-tabs" id="currentSessionTabs">0 个标签页</div>
        </div>
      </div>
      <button class="session-menu-btn" id="currentSessionMenu">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 16a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2Z"/>
        </svg>
      </button>
    </div>

    <!-- Actions -->
    <div class="actions">
      <button class="action-btn primary" id="createSessionFromPageBtn">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </svg>
        在此页面创建会话
      </button>
      <button class="action-btn" id="newSessionBtn">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
        </svg>
        新建空会话
      </button>
      <button class="action-btn" id="switchSessionBtn">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
        </svg>
        切换会话
      </button>
    </div>

    <!-- Sessions List -->
    <div class="sessions-section">
      <div class="section-header">
        <h3>所有会话</h3>
        <span class="session-count" id="sessionCount">0</span>
      </div>
      <div class="sessions-list" id="sessionsList">
        <!-- Sessions will be populated here -->
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
      <button class="quick-action" id="openUrlBtn" title="在会话中打开链接">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
        </svg>
      </button>
      <button class="quick-action" id="importSessionBtn" title="导入会话">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
        </svg>
      </button>
      <button class="quick-action" id="exportSessionBtn" title="导出会话">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.89,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3C1.89,20 1,19.11 1,18Z"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- Modals -->
  <div class="modal" id="newSessionModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>创建新会话</h3>
        <button class="modal-close" id="newSessionModalClose">&times;</button>
      </div>
      <div class="modal-body">
        <form id="newSessionForm">
          <div class="form-group">
            <label for="sessionName">会话名称</label>
            <input type="text" id="sessionName" name="sessionName" placeholder="请输入会话名称" required>
          </div>
          <div class="form-group">
            <label for="sessionColor">颜色</label>
            <div class="color-picker">
              <div class="color-option" data-color="#4285f4"></div>
              <div class="color-option" data-color="#ea4335"></div>
              <div class="color-option" data-color="#fbbc04"></div>
              <div class="color-option" data-color="#34a853"></div>
              <div class="color-option" data-color="#ff6d01"></div>
              <div class="color-option" data-color="#9c27b0"></div>
              <div class="color-option" data-color="#00bcd4"></div>
              <div class="color-option" data-color="#795548"></div>
            </div>
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox" id="fingerprintProtection">
              启用指纹保护
            </label>
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox" id="enableProxy">
              启用代理
            </label>
          </div>
          <div class="proxy-config" id="proxyConfig" style="display: none;">
            <div class="form-row">
              <select id="proxyType" name="proxyType">
                <option value="http">HTTP</option>
                <option value="https">HTTPS</option>
                <option value="socks4">SOCKS4</option>
                <option value="socks5">SOCKS5</option>
              </select>
              <input type="text" id="proxyHost" name="proxyHost" placeholder="主机地址">
              <input type="number" id="proxyPort" name="proxyPort" placeholder="端口">
            </div>
            <div class="form-row">
              <input type="text" id="proxyUsername" name="proxyUsername" placeholder="用户名（可选）">
              <input type="password" id="proxyPassword" name="proxyPassword" placeholder="密码（可选）">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn secondary" id="newSessionCancel">取消</button>
        <button type="submit" form="newSessionForm" class="btn primary">创建会话</button>
      </div>
    </div>
  </div>

  <div class="modal" id="switchSessionModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>切换到会话</h3>
        <button class="modal-close" id="switchSessionModalClose">&times;</button>
      </div>
      <div class="modal-body">
        <div class="sessions-grid" id="switchSessionsList">
          <!-- Sessions will be populated here -->
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="openUrlModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>在会话中打开链接</h3>
        <button class="modal-close" id="openUrlModalClose">&times;</button>
      </div>
      <div class="modal-body">
        <form id="openUrlForm">
          <div class="form-group">
            <label for="urlInput">网址</label>
            <input type="url" id="urlInput" name="urlInput" placeholder="https://example.com" required>
          </div>
          <div class="form-group">
            <label for="urlSessionSelect">会话</label>
            <select id="urlSessionSelect" name="urlSessionSelect" required>
              <option value="">选择一个会话</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn secondary" id="openUrlCancel">取消</button>
        <button type="submit" form="openUrlForm" class="btn primary">打开</button>
      </div>
    </div>
  </div>

  <div class="modal" id="quickSessionModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>在此页面创建新会话</h3>
        <button class="modal-close" id="quickSessionModalClose">&times;</button>
      </div>
      <div class="modal-body">
        <p class="modal-description">将在新标签页中打开当前页面，并创建一个独立的会话环境，您可以在其中登录不同的账户。</p>
        <form id="quickSessionForm">
          <div class="form-group">
            <label for="quickSessionName">会话名称</label>
            <input type="text" id="quickSessionName" name="quickSessionName" placeholder="请输入会话名称" required>
          </div>
          <div class="form-group">
            <label for="quickSessionColor">颜色</label>
            <div class="color-picker" id="quickColorPicker">
              <div class="color-option" data-color="#4285f4"></div>
              <div class="color-option" data-color="#ea4335"></div>
              <div class="color-option" data-color="#fbbc04"></div>
              <div class="color-option" data-color="#34a853"></div>
              <div class="color-option" data-color="#ff6d01"></div>
              <div class="color-option" data-color="#9c27b0"></div>
              <div class="color-option" data-color="#00bcd4"></div>
              <div class="color-option" data-color="#795548"></div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn secondary" id="quickSessionCancel">取消</button>
        <button type="submit" form="quickSessionForm" class="btn primary">创建并打开</button>
      </div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html> 